<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>燃气管道安装申请</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/rqgdazsq.css" />
		<link rel="stylesheet" type="text/css" href="css/mobileSelect.css" />
		<script src="jQuery/jquery.js"></script>
		<script src="jQuery/iscroll.js"></script>
		<script src="js/common.js"></script>
		<script src="js/mobileSelect.min.js"></script>
		<!--<script src="http://p5l1il1mw.bkt.clouddn.com/js/JSSdk-1.0.js"></script>-->
		<script src="http://p5l1il1mw.bkt.clouddn.com/js/JSSdk-1.0.1.js"></script>
		<script type="text/javascript">
			var weekdayArr=['不动产权证','房屋产权证','购房合同','公租房合同'];

			$(function() {

				//选择按钮
				var arr = document.getElementsByTagName('button');
				for(var i = 0; i < arr.length; i++) {
					arr[i].onclick = function() {
						//this是当前激活的按钮，在这里可以写对应的操作    
						if(this.className == '') {
							this.className = 'btn-green';
							var name = this.id;
							var btn = document.getElementsByClassName('btn-green');
							for(var j = 0; j < btn.length; j++) {
								if(btn[j].id != name) {
									btn[j].className = '';
								}
							}
						} else {
							this.className = '';
							var name = this.id;
							var btn = document.getElementsByClassName('');
							for(var j = 0; j < btn.length; j++) {
								if(btn[j].id != name) {
									btn[j].className = 'btn-green';
								}
							}
						}
					}
				}

				//显示隐藏图片上传
				$(".down-icon").click(function() {
					if($(".upload-group").height() == 150) {
						//$(".upload-group").height("45px");
						$(".upload-group").animate({
							height: "45px"
						});
						$("#imgDiv").hide();
						$(".down-icon").removeClass("selectColor");
					} else if($(".upload-group").height() == 45) {
						$(".upload-group").animate({
							height: "150px"
						});
						$("#imgDiv").show();
						$(".down-icon").addClass("selectColor");
					}
				});
				$(".down-icon2").click(function() {
					if($(".upload-group2").height() == 150) {
						$(".upload-group2").animate({
							height: "45px"
						});
						$("#imgDiv2").hide();
						$(".down-icon2").removeClass("selectColor");

					} else if($(".upload-group2").height() == 45) {
						$(".upload-group2").animate({
							height: "150px"
						});
						$("#imgDiv2").show();
						$(".down-icon2").addClass("selectColor");
					}
				});

				//调用摄像机
				$(".div-img").click(function() {
					window.yl.call("chooseImage", {}, {
						onSuccess: function(a) {
							alert("success");
						},
						onFail: function(a) {
							alert("fail");
						}
					})
				});

				//单选弹出框
				var mobileSelect0 = new MobileSelect({
					trigger: '#trigger0',
					wheels: [{
						data: weekdayArr
					}],
					//position: [1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
					transitionEnd: function(indexArr, data) {
						//console.log(data);
					},
					callback: function(indexArr, data) {
						console.log(data);
					}
				});

			});
		</script>
	</head>

	<body>
		<div class="rq-container">
			<div class="input-group-list">
				<div class="input-group">
					<label>地址</label>
					<input type="text" placeholder="安吉路46号7栋806门" />
				</div>
				<div class="input-group">
					<label>申请人</label>
					<input type="text" placeholder="请输入名字" />
				</div>
				<div class="input-group">
					<label>身份证号码</label>
					<input type="text" placeholder="请输入19位证件号码" />
				</div>
				<div class="input-group">
					<label>手机号</label>
					<input type="text" placeholder="请输入手机号" />
				</div>
				<div class="btn-group">
					<label>开通项目</label>
					<button class="btn-green">灶具开通250元</button>
					<button>热水器开通200元</button>
					<button>地热开通250元</button>
					<button>干衣机200元</button>
					<p>按照杭价服143号文件，您户所在住宅未缴纳管道燃气设施埋费，须缴纳管道燃气设施改造费1000元。</p>
				</div>
				<div class="upload-group">
					<label>身份证</label>
					<i class="iconfont down-icon">&#xe600;</i>
					<div id="imgDiv" class="imgDiv">
						<div class="div-img">
							<i class="iconfont">&#xe613;</i>
						</div>
						<div class="div-img div-img2">
							<i class="iconfont">&#xe613;</i>
						</div>
					</div>
				</div>
				<div class="fold ansel_input" required>
					<div class="label">产权证明文件类型</div>
					<!--<select data-role="none" class="fold-select ansel_inputval" isval="true" msg="选择文件类型" readonly>
						<option value="aaa">不动产权证</option>
						<option value="bbb">房屋产权证</option>
						<option value="ccc">购房合同</option>
						<option value="ddd">公租房合同</option>
					</select>-->
					<div id="trigger0" class="ansel_inputval">选择文件类型</div>
				</div>
				<div class="input-group">
					<label class="label-large">产权证明文件编号</label>
					<input class="input-small" type="text" placeholder="请输入文件编号" />
				</div>
				<div class="upload-group2">
					<label>不动产证</label>
					<i class="iconfont down-icon2">&#xe600;</i>
					<div id="imgDiv2" class="imgDiv">
						<div class="div-img">
							<i class="iconfont">&#xe613;</i>
						</div>
						<div class="div-img div-img2">
							<i class="iconfont">&#xe613;</i>
						</div>
					</div>
				</div>
				<p class="p-tip">审核通过后，你即可签约缴费，并预约安装，预约后五天内上门。</p>
			</div>
			<footer>
				<div class="submit-wrapper">
					<button type="button">确定</button>
				</div>
			</footer>
		</div>
	</body>

</html>